---
title: Blog Cards
description: Blog card components created with Tailwind CSS
emoji: 📰
container: p-6 max-w-md mx-auto
terms:
  - blog
  - card
  - post
components:
  - { title: 'Bordered with image, date, title and excerpt, shadow on hover', dark: true }
  - { title: 'Floating image with title and excerpt', dark: true }
  - { title: 'Bordered with image, title, excerpt and call to action', dark: true }
  - { title: 'Gradient border with date, title and tags, animated gradient on hover', dark: true }
  - { title: 'Bordered with icon, title, excerpt and call to action, shadow on hover', dark: true }
  - {
      title: 'Artistic with rotated date, image, title, excerpt and call to action, shadow on hover',
      dark: true,
    }
  - { title: 'Background image with overlay containing date, title and excerpt' }
---

# Blog Card Components

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
